<template>
    <div>
        <el-table :data="studentsList" style="width: 100%">
            <el-table-column label="学号" prop="userNumber">
            </el-table-column>
            <el-table-column label="姓名" prop="name">
            </el-table-column>
            <el-table-column label="性别" prop="gender">
            </el-table-column>
            <el-table-column label="年龄" prop="age">
            </el-table-column>
            <el-table-column label="电话" prop="phone">
            </el-table-column>
            <el-table-column label="状态">
                <template slot-scope="scope">
                    <el-tag size="medium" type="warning">{{ scope.row.state }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column align="right">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleOpen(scope.row.userNumber)">通过 </el-button>
                    <el-button size="mini" type="danger" @click="handleUnOpen(scope.row.userNumber)">拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="width:50%;margin: 20px auto 0;" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize" layout=" prev, pager, next, jumper,total, sizes" :total="total">
        </el-pagination>
        <el-dialog title="拒绝理由" :visible.sync="dialogFormVisible" width="25%">
            <el-form :model="form">
                <el-form-item>
                    <el-input type="textarea" :rows="2" placeholder="请输入拒绝内容" v-model="form.unJoin"
                        autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleExit">取 消</el-button>
                <el-button type="primary" @click="handleOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api'
export default {
    data() {
        return {
            pageIndex: 1,
            pageSize: 10,
            total: 100,
            studentsList: [],
            dialogFormVisible: false,
            form: {
                userNumber: "",
                unJoin: "",
                state: "未通过"
            }
        };
    },

    mounted() {
        this.getUnOpenTeacher()
    },

    methods: {
        async getUnOpenTeacher() {
            let res = await api.getUnOpenTeacher({ pageIndex: this.pageIndex, pageSize: this.pageSize, role: "teachers" })
            if (res?.code == 200) {
                this.studentsList = res.data
                this.total = res.total
            } else {
                this.studentsList = []
            }
        },
        async handleOpen(userNumber) {
            let res = await api.openUser({ userNumber, state: "通过", role: "teachers" })
            if (res?.code == 200) {
                this.$message({
                    type: "success",
                    message: res.message
                })
                this.getUnOpenTeacher();
            } else {
                this.$message.error(res.message)
            }
        },
        handleUnOpen(userNumber) {
            this.form.userNumber = userNumber;
            this.dialogFormVisible = true;
        },
        handleExit() {
            this.form.userNumber = "";
            this.form.unJoin = "";
            this.dialogFormVisible = false;
        },
        async handleOk() {
            this.dialogFormVisible = false;
            let res = await api.openUser({ ...this.form, role: "teachers" })
            if (res?.code == 200) {
                this.$message({
                    type: "success",
                    message: res.message
                })
                this.getUnOpenTeacher();
            } else {
                this.$message.error(res.message)
            }
            this.form.userNumber = "";
            this.form.unJoin = "";
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getUnOpenTeacher()
        },
        handleCurrentChange(val) {
            this.pageIndex = val;
            this.getUnOpenTeacher()
        }
    },
};
</script>

<style lang="sass" scoped>

</style>